<template>
  <el-container>
    <el-aside width="225px">
      <div class="menu"
           style="background-color:white;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
        <div v-popover:popover0 v-if="menu[0]">
          <div class="menu-item">
            <div class="menu-text">{{menu[0].jobCategoryName}}</div>
            <i class="el-icon-arrow-right"></i></div>
          <el-popover
              ref="popover0"
              placement="right-start"
              :title="menu[0].jobCategoryName"
              width="580"
              trigger="hover">
            <hr style="border: 0.5px solid #dcdee1">
            <div class="menu-item-hover">
              <div v-for="(item,index) in menu[0].childCategory" :key="index">
                <el-link :href="categoryHref(item.jobCategoryName)" :underline="false" target="_blank">{{item.jobCategoryName}}</el-link>
              </div>
            </div>
          </el-popover>
        </div>

        <div v-popover:popover1 v-if="menu[1]">
          <div class="menu-item">
            <div class="menu-text">{{menu[1].jobCategoryName}}</div>
            <i class="el-icon-arrow-right"></i></div>
          <el-popover
              ref="popover1"
              placement="right-start"
              :title="menu[1].jobCategoryName"
              width="580"
              trigger="hover">
            <hr style="border: 0.5px solid #dcdee1">
            <div class="menu-item-hover">
              <div v-for="(item,index) in menu[1].childCategory" :key="index">
                <el-link :href="categoryHref(item.jobCategoryName)" :underline="false" target="_blank">{{item.jobCategoryName}}</el-link>
              </div>
            </div>
          </el-popover>
        </div>
        <div v-popover:popover2 v-if="menu[2]">
          <div class="menu-item">
            <div class="menu-text">{{menu[2].jobCategoryName}}</div>
            <i class="el-icon-arrow-right"></i></div>
          <el-popover
              ref="popover2"
              placement="right-start"
              :title="menu[2].jobCategoryName"
              width="580"
              trigger="hover">
            <hr style="border: 0.5px solid #dcdee1">
            <div class="menu-item-hover">
              <div v-for="(item,index) in menu[2].childCategory" :key="index">
                <el-link :href="categoryHref(item.jobCategoryName)" :underline="false" target="_blank">{{item.jobCategoryName}}</el-link>
              </div>
            </div>
          </el-popover>
        </div>
        <div v-popover:popover3 v-if="menu[3]">
          <div class="menu-item">
            <div class="menu-text">{{menu[3].jobCategoryName}}</div>
            <i class="el-icon-arrow-right"></i></div>
          <el-popover
              ref="popover3"
              placement="right-start"
              :title="menu[3].jobCategoryName"
              width="580"
              trigger="hover">
            <hr style="border: 0.5px solid #dcdee1">
            <div class="menu-item-hover">
              <div v-for="(item,index) in menu[3].childCategory" :key="index">
                <el-link :href="categoryHref(item.jobCategoryName)" :underline="false" target="_blank">{{item.jobCategoryName}}</el-link>
              </div>
            </div>
          </el-popover>
        </div>
        <div v-popover:popover4 v-if="menu[4]">
          <div class="menu-item">
            <div class="menu-text">{{menu[4].jobCategoryName}}</div>
            <i class="el-icon-arrow-right"></i></div>
          <el-popover
              ref="popover4"
              placement="right-start"
              :title="menu[4].jobCategoryName"
              width="580"
              trigger="hover">
            <hr style="border: 0.5px solid #dcdee1">
            <div class="menu-item-hover">
              <div v-for="(item,index) in menu[4].childCategory" :key="index">
                <el-link :href="categoryHref(item.jobCategoryName)" :underline="false" target="_blank">{{item.jobCategoryName}}</el-link>
              </div>
            </div>
          </el-popover>
        </div>
        <div v-popover:popover5 v-if="menu[5]">
          <div class="menu-item">
            <div class="menu-text">{{menu[5].jobCategoryName}}</div>
            <i class="el-icon-arrow-right"></i></div>
          <el-popover
              ref="popover5"
              placement="right-start"
              :title="menu[5].jobCategoryName"
              width="580"
              trigger="hover">
            <hr style="border: 0.5px solid #dcdee1">
            <div class="menu-item-hover">
              <div v-for="(item,index) in menu[5].childCategory" :key="index">
                <el-link :href="categoryHref(item.jobCategoryName)" :underline="false" target="_blank">{{item.jobCategoryName}}</el-link>
              </div>
            </div>
          </el-popover>
        </div>
        <div v-popover:popover6 v-if="menu[6]">
          <div class="menu-item">
            <div class="menu-text">{{menu[6].jobCategoryName}}</div>
            <i class="el-icon-arrow-right"></i></div>
          <el-popover
              ref="popover6"
              placement="right-start"
              :title="menu[6].jobCategoryName"
              width="580"
              trigger="hover">
            <hr style="border: 0.5px solid #dcdee1">
            <div class="menu-item-hover">
              <div v-for="(item,index) in menu[6].childCategory" :key="index">
                <el-link :href="categoryHref(item.jobCategoryName)" :underline="false" target="_blank">{{item.jobCategoryName}}</el-link>
              </div>
            </div>
          </el-popover>
        </div>
        <div v-popover:popover7 v-if="menu[7]">
          <div class="menu-item">
            <div class="menu-text">{{menu[7].jobCategoryName}}</div>
            <i class="el-icon-arrow-right"></i></div>
          <el-popover
              ref="popover7"
              placement="right-start"
              :title="menu[7].jobCategoryName"
              width="580"
              trigger="hover">
            <hr style="border: 0.5px solid #dcdee1">
            <div class="menu-item-hover">
              <div v-for="(item,index) in menu[7].childCategory" :key="index">
                <el-link :href="categoryHref(item.jobCategoryName)" :underline="false" target="_blank">{{item.jobCategoryName}}</el-link>
              </div>
            </div>
          </el-popover>
        </div>
      </div>
    </el-aside>
    <Carousel style="width:660px"></Carousel>
    <PhoneLogin style="width:240px;"></PhoneLogin>
  </el-container>
</template>

<script>
import Carousel from '../common/Carousel.vue';
import PhoneLogin from "../common/PhoneLogin.vue";
import JobCategoryList from "../../utils/jobCategoryList"
export default {
  jobCategoryName: "Menu",
  components: {Carousel, PhoneLogin},
  data() {
    return {
      menu: JobCategoryList,
    }
  },
  methods: {
    categoryHref(keywords){
      return 'https://element.eleme.io/'+keywords;
    }
  },
}
</script>
<style scoped>
.grid-content {
  min-height: 50px;
  color: white;
  line-height: 50px;
  font-size: 14px;
}
.menu-item-hover {
  width: 670px;
}

.menu-item {
  height: 44px;
  line-height: 44px;
}

.menu-text {
  display: inline-block;
  width: 160px;
  text-align: left;
  padding-left: 20px;
}

.menu-item-hover div {
  width: 145px;
  height: 32px;
  line-height: 32px;
  float: left;
}
</style>